<template>
  <div class="login">
    <div class="btnBox">
      <span class="theme">
        <el-icon v-if="theme === 'auto'" :size="30" @click="toggleTheme">
          <MoonIcon />
        </el-icon>
        <span title="切换白天模式" v-else>
          <el-icon :size="30" @click="toggleTheme"><Sunny /></el-icon>
        </span>
      </span>
      <span title="切换语言" class="locale">
        <el-icon :size="30" @click="toggleLocale">
          <LocaleIcon />
        </el-icon>
      </span>
    </div>

    <div class="loginBox">
      <div class="image"></div>
      <div class="login-center">
        <h2>{{ $t('login.systemName') }}</h2>
        <el-form
          label-position="right"
          label-width="70px"
          :model="loginForm"
          style="max-width: 460px"
          :rules="rules"
          ref="ruleFormRef"
        >
          <el-form-item :label="$t('login.userName')" prop="userName">
            <el-input v-model="loginForm.userName" />
          </el-form-item>
          <el-form-item :label="$t('login.password')" prop="password">
            <el-input show-password v-model="loginForm.password" />
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="onSubmit(ruleFormRef)">{{
          $t('login.loginBtn')
        }}</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus'
// import { ElMessage } from 'element-plus'
import { login } from '@/api/common'
import store from '@/store/index'
import MoonIcon from '@/assets/svg/MoonIcon.vue'
import LocaleIcon from '@/assets/svg/LocaleIcon.vue'

export default defineComponent({
  components: { LocaleIcon, MoonIcon },
  setup () {
    const router = useRouter()
    const loginForm = reactive({
      userName: 'admin',
      password: '123456'
    })
    const ruleFormRef = ref<FormInstance>()
    const rules = reactive<FormRules>({
      userName: [
        {
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }
      ],
      password: [
        {
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }
      ]
    })
    const onSubmit = async (formEl: FormInstance | undefined) => {
      if (!formEl) return
      await formEl.validate((valid, fields) => {
        if (valid) {
          login(loginForm).then((res) => {
            router.push('/')
            store.commit('baseInfo/setUserInfo', res.data)
          })
        } else {
          console.error('error submit!', fields)
        }
      })
    }
    // 语言
    const toggleLocale = () => {
      store.commit('config/toggleLocale')
    }
    // 主题 白天黑夜模式
    const theme = computed(() => store.state.config.theme)
    const toggleTheme = () => store.commit('config/toggleTheme')
    return {
      loginForm,
      rules,
      onSubmit,
      ruleFormRef,
      toggleLocale,
      toggleTheme,
      theme
    }
  }
})
</script>

<style lang="scss" scoped>
.login {
  height: 100vh;
  background: url('https://t7.baidu.com/it/u=3793981416,2376031355&fm=193&f=GIF')
    no-repeat;
  background-size: 100% 120%;
  // background-color: var(--el-bg-color);
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  position: relative;
  &::after {
    content: '';
    width: 0px;
    height: 0px;
    box-shadow: 0px 0px 138px 196px #7a757eb0;
    position: absolute;
    right: 0;
    z-index: 1;
    top: 0;
    transform: translate(-50%, -50%);
  }

  .btnBox {
    position: absolute;
    right: 10px;
    top: 20px;
    display: flex;
    align-items: center;
    z-index: 2;
    & > * {
      margin: 0 10px;
    }
    .locale {
    }

    .theme {
    }
  }

  .loginBox {
    display: flex;
    align-items: center;
    // background-color: var(--el-bg-color-page);
    .image {
      margin: 0 60px;
      width: 300px;
      height: 200px;
      background: url(../../assets/image/loginBoxImage.png) no-repeat;
      background-size: contain;
    }
  }
  .login-center {
    width: 600px;
    padding: 70px 30px;

    h2 {
      margin-bottom: 45px;
      font-size: 35px;
    }
    .el-button {
      width: 70%;
      margin-top: 25px;
    }
  }
}
</style>
